<template>
  <div class="statistical-line">
    <div id="routeLevelChart" ref="chartRef" :style="{ width: '100%', height: '180px' }"></div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;
let resizeHandler: () => void;

// 获取模拟数据
const getMockRouteLevelData = () => {
  // 模拟航线水平数据
  return {
    categories: ['YC2401', 'BR2406', 'ZZ2401', 'AC2401', 'SF2401', 'RA2401'],
    series: [
      {
        name: '计划目标',
        type: 'line',
        smooth: true,
        data: [9000, 12000, 9000, 14000, 13000, 9000],
        lineStyle: {
          color: '#8c8c8c',
          width: 2
        },
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#8c8c8c',
          borderWidth: 2,
          borderColor: '#fff'
        }
      },
      {
        name: '航线水平',
        type: 'line',
        smooth: true,
        data: [9000, 12000, 9000, 14000, 13000, 9000],
        lineStyle: {
          color: '#ff9800',
          width: 3
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: '#ff9800',
          borderWidth: 2,
          borderColor: '#fff'
        }
      }
    ]
  };
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  try {
    myChart = echarts.init(chartRef.value);
    const mockData = getMockRouteLevelData();

    const option = {
      title: {
        text: '航线水平趋势',
        left: 'center',
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#409eff',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['计划目标', '航线水平'],
        bottom: 0,
        textStyle: {
          color: '#666',
          fontSize: 12
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '20%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: true,
        data: mockData.categories,
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f0f2f5',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12
        }
      },
      series: mockData.series
    };

    myChart.setOption(option);

    // 添加窗口大小改变时的响应
    resizeHandler = () => {
      myChart?.resize();
    };
    window.addEventListener('resize', resizeHandler);

  } catch (error) {
    console.error('初始化航线水平趋势图失败:', error);
  }
};

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  // 清理资源
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler);
  }
  myChart?.dispose();
  myChart = null;
});
</script>

<style lang='scss' scoped>
.statistical-line {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
  padding: 10px;
}
</style>